<template>
  <Qfpage title="商品管理">
    <!-- 头部的内容 -->
    <template #hd>
      <el-button @click="showAddDialog = true">新增商品</el-button>
    </template>
    <el-table :data="list" height="100%">
      <el-table-column label="编号" prop="goodno" />
      <el-table-column label="商品名称" prop="name" />
      <el-table-column label="数量" prop="number" />
      <el-table-column label="单位" prop="unit">
        <!-- el-table-cloumn 可以使用默认插槽  这个插槽提供了一个
          插槽作用域 方便我们来获取当前行的所有信息 以便我们进行自定义的展示
        -->
        <template #default="{ row }">
          {{ showUnit(row.unit) }}
        </template>
      </el-table-column>
      <el-table-column label="价格" prop="inMoney" />
      <el-table-column label="过期时间" prop="deadLine">
        <template #default="{ row }"> {{ formatTime(row.deadLine) }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="openEdit({ ...row })">编辑</el-button>
          <el-button @click="handleDel(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 底部分页器 -->
    <template #ft>
      <el-pagination
        layout="prev, pager, next, sizes"
        :page-sizes="[10, 30, 50, 100]"
        :total="total"
        :default-page-size="limit"
        :current-page="page"
        @size-change="handeSizeChange"
        @current-change="handlePageChange"
      />
    </template>
  </Qfpage>

  <!-- 新增商品的弹窗 -->
  <el-dialog v-model="showAddDialog" width="600px" @opened="handleOpen">
    <template #header> + 添加商品 </template>
    <div>
      <el-form ref="addfrom" label-width="100px" :rules="rules" :model="goods">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="goods.name" />
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            v-model:file-list="fileList"
            :on-success="handleUploadOk"
            :before-upload="handleBeforeUpload"
            :http-request="handleUpload"
          >
            <el-button type="primary">Click to upload</el-button>
            <template #tip>
              <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
            </template>
          </el-upload>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="商品数量">
              <el-input-number v-model="goods.number" />
            </el-form-item>
            <el-form-item label="商品编号">
              <el-input v-model="goods.goodno" />
            </el-form-item>
            <el-form-item label="操作员id">
              <el-input v-model="goods.actionUser" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库价格" prop="inMoney">
              <el-input v-model.number="goods.inMoney">
                <template #prefix>￥</template>
                <template #suffix>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="单位">
              <el-select v-model="goods.unit">
                <el-option value="1">件</el-option>
                <el-option value="2">箱</el-option>
                <el-option value="3">瓶</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="到期时间">
              <el-date-picker type="date" v-model="goods.deadLine" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="供应商">
          <el-input v-model="goods.suply" />
        </el-form-item>

        <!-- 商品的描述 -->
        <QuillEditor
          theme="snow"
          v-model:content="goods.desc"
          contentType="html"
          style="height: 500px"
          :modules="modules"
          toolbar="full"
        />
      </el-form>
    </div>
    <template #footer>
      <el-button @click="handleAdd">确认添加</el-button>
    </template>
  </el-dialog>

  <!-- 编辑商品 -->
  <el-drawer v-model="showEdit" title="修改商品" size="600px">
    <div>
      <el-form label-width="100px">
        <el-form-item label="商品名称">
          <el-input v-model="editGoods.name" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品数量">
              <el-input-number v-model="editGoods.number" />
            </el-form-item>
            <el-form-item label="商品编号">
              <el-input v-model="editGoods.goodno" />
            </el-form-item>
            <el-form-item label="操作员id">
              <el-input v-model="editGoods.actionUser" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库价格">
              <el-input v-model="editGoods.inMoney">
                <template #prefix>￥</template>
                <template #suffix>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="单位">
              <el-select v-model="editGoods.unit">
                <el-option value="1">件</el-option>
                <el-option value="2">箱</el-option>
                <el-option value="3">瓶</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="到期时间">
              <el-date-picker type="date" v-model="editGoods.deadLine" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="供应商">
          <el-input v-model="editGoods.suply" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="handleEidt">确认修改</el-button>
    </template>
  </el-drawer>
</template>
<!-- 在一些大型项目当中 我们可以单独的剥离js逻辑和样式 -->
<script lang="ts" src="./index"></script>
<style lang="scss" scoped>
@import './style.scss';
</style>
